<template>
  <div class="flex flex-column height appointment">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
      style="border-bottom:1px solid #f1f1f1"
    ></header-top>
    <div class="content_mian">
      <div class="content_top">
        <div class="content_info">
          <div class="info_image">
            <img src="../../assets/Avatar.png" />
          </div>
          <div class="info_cont">
            <div class="cont_name">
              <span>张忠俊 </span>
              <i>太医网互联网医院</i>
            </div>
            <div class="cont_tab">
              <ul>
                <li>主治医师</li>
                <li>呼吸内科</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="content_body">
        <div class="body_cont">
          <div class="body_list">
            <div class="list_title">服务项目</div>
            <div class="list_cont">图文问诊</div>
          </div>
          <div class="body_list">
            <div class="list_title">就诊人</div>
            <div class="list_cont">范丽丽 女 31岁</div>
          </div>
          <div class="body_list">
            <div class="list_title">病情描述</div>
            <div class="list_cont">
              咳嗽，呼吸困难咳嗽，呼吸困难咳嗽，呼吸困难，呼吸困难咳嗽，呼吸困难
            </div>
          </div>
          <div class="body_list">
            <div class="list_title">诊断结论</div>
            <div class="list_cont">急性上呼吸道感染</div>
          </div>
          <div class="body_list">
            <div class="list_title">问诊时间</div>
            <div class="list_cont">2020-9-15 9:00:00</div>
          </div>
          <div class="body_list">
            <div class="list_title">订单编号</div>
            <div class="list_cont">1231423540000000</div>
          </div>
          <div class="body_list">
            <div class="list_title">订单金额</div>
            <div class="list_cont">¥20.00</div>
          </div>
        </div>
      </div>
      <!-- <div class="content_foot">
        <div class="foot_cont">
          <div class="con_foot">
            <div class="foot_name">电子病历</div>
            <div class="foot_image">
              <img src="../../assets/icon_left.png" />
            </div>
          </div>
        </div>
        <div class="foot_cont">
          <div class="con_foot">
            <div class="foot_name">电子处方</div>
            <div class="foot_image">
              <span>待审核</span><img src="../../assets/icon_left.png" />
            </div>
          </div>
        </div>
        <div class="foot_cont">
          <div class="con_foot">
            <div class="foot_name">问诊对话记录</div>
            <div class="foot_image">
              <img src="../../assets/icon_left.png" />
            </div>
          </div>
        </div>
        <div class="foot_cont">
          <div class="con_foot">
            <div class="foot_name">服务评价</div>
            <div class="foot_image">
              <span>待评价</span><img src="../../assets/icon_left.png" />
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="again_yy">
      <div class="yy_cont" @click="toOrder">
        再次预约
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
import {orderDetail} from "@/api/index"
export default {
  name: "appointment",
  components: {
    HeaderTop
  },
  data() {
    return {
      TxtHeader: {
        //头部设置
        background: "#fff", //头部背景颜色
        color: "#0a0a0a", //头部中间文字颜色
        title: "问诊详情",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#000"
        }
      }
    };
  },
  methods: {
    toOrder() {
      localStorage.setItem("orderType", "3");
      this.$router.push("/order");
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.appointment {
  .content_mian {
    height: 100% - 1.24rem;
    overflow-y: auto;
    .content_top {
      background: #fff;
      margin-bottom: 0.1rem;
      .content_info {
        padding: 0.25rem 0 0.21rem 0.15rem;
        display: flex;
        .info_image {
          img {
            width: 0.6rem;
            background-size: 100%;
          }
        }
        .info_cont {
          padding-left: 0.1rem;
          .cont_name {
            span {
              font-size: 0.18rem;
              color: #333;
            }
            i {
              font-size: 0.14rem;
              color: #666;
              padding-left: 0.1rem;
            }
          }
          .cont_tab {
            padding-top: 0.08rem;
            ul {
              li {
                width: 0.68rem;
                height: 0.29rem;
                line-height: 0.29rem;
                background: #f5f5f5;
                margin-right: 0.1rem;
                text-align: center;
                display: inline-block;
              }
            }
          }
        }
      }
    }
    .content_body {
      background: #fff;
      margin-bottom: 0.1rem;
      .body_cont {
        padding: 0.15rem;
        .body_list {
          display: flex;
          font-size: 0.14rem;
          margin-bottom: 0.05rem;
          .list_title {
            color: #666;
            min-width: 1.1rem;
            width: 1.1rem;
          }
          .list_cont {
            flex: auto;
            color: #333;
          }
        }
      }
    }
    .content_foot {
      background: #fff;
      margin-bottom: 0.2rem;
      .foot_cont {
        .con_foot {
          display: flex;
          padding: 0.15rem;
          border-bottom: 0.01rem solid #eee;
          .foot_name {
            font-size: 0.14rem;
            color: #333;
          }
          .foot_image {
            margin-left: auto;
            span {
              color: #fa6400;
              margin-right: 0.14rem;
            }
            img {
              width: 0.07rem;
              background-size: 100%;
            }
          }
        }
      }
    }
  }
  .again_yy {
    background: #fff;
    padding: 0.15rem 0.2rem;
    .yy_cont {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.35rem;
      height: 0.44rem;
      font-size: 0.18rem;
      color: #fff;
      line-height: 0.44rem;
      border-radius: 0.44rem;
      background: url("../../assets/icon_foot.png") no-repeat center;
    }
  }
}
</style>
